<template>
  <div style="width: 100%; height: 100%">
    <Header title="各单位本年检测计划完成率" />
    <div class="content">
      <div
        v-for="(item, index) in chartList"
        :id="'charts' + index"
        :key="index"
        class="row" />
    </div>
  </div>
</template>
<script>
import Header from './header.vue'
import { DeptYearPlanCompletionRate } from '@/api/cms/Inspection-management/Inspection-plan-management/InspectionPlanManagementIndex'
import echarts from 'echarts'
export default {
  components: {
    Header
  },
  props: {
    conditionFind: {
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => {
        return {}
      },
      type: Object
    }
  },
  data() {
    return {
      chartList: []
    }
  },
  watch: {
    conditionFind: {
      handler: function(newQuestion, oldQuestion) {
        this.init()
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    const that = this

    window.addEventListener('resize', function() {
      that.$nextTick((_) => {
        this.chartList.forEach((item, index) => {
          const myChart = echarts.init(
            document.getElementById(`charts${index}`)
          )
          myChart.resize()
        })
      })
    })
  },
  methods: {
    init() {
      DeptYearPlanCompletionRate(this.conditionFind).then((res) => {
        this.chartList = res.data
        if (this.chartList.length > 0) {
          this.$nextTick(() => {
            this.initChart()
          })
        }
      })
    },
    initChart() {
      this.chartList.forEach((item, index) => {
        const myChart = echarts.init(document.getElementById(`charts${index}`))
        console.log(item)
        let rate = 0 + '%'
        if (item.totalNum === '0' || item.completeNum === '0') {
          rate = 0 + '%'
        } else {
          rate = ((item.completeNum / item.totalNum) * 100).toFixed(2) + '%'
        }
        const option = {
          title: {
            text: rate,
            textStyle: {
              color: '#409EFF',
              fontSize: 18,
              fontFamily: 'YouSheBiaoTiHei'
            },

            subtext: item.deptName,
            subtextStyle: {
              color: '#606266',
              fontSize: 16
            },

            itemGap: 50,
            left: 'center',
            top: '30%'
          },
          tooltip: {
            formatter: function(params) {}
          },
          angleAxis: {
            max: 100,
            clockwise: false, // 逆时针
            // 隐藏刻度线
            show: false
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          polar: {
            radius: '130%',
            center: ['50%', '40%']
          },
          series: [
            {
              stack: '测试',
              type: 'bar',
              data: [Number(item.completeNum)],
              showBackground: true,
              backgroundStyle: {
                color: '#EFF2F5'
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 10,
              silent: true,
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#68F6FF'
                    },
                    {
                      offset: 1,
                      color: '#0168FF'
                    }
                  ]),

                  borderWidth: 3
                }
              }
            },
            {
              stack: '测试',
              type: 'bar',
              data: [0.01],
              showBackground: true,
              backgroundStyle: {
                color: '#E6EFFB',
                shadowColor: '#fff',
                shadowBlur: 10,
                shadowOffsetY: 2
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 14,
              itemStyle: {
                color: '#90BDFF',
                borderColor: 'rgba(81,143,239, 1)',
                borderWidth: 3
              }
            }
          ]
        }
        myChart.setOption(option)
        myChart.resize()
      })
    }
  }
}
</script>
<style scoped>
.content {
  width: 100%;
  height: calc(100% - 50px);

  display: flex;
  flex-wrap: wrap;
}
.row {
  width: 33.3%;
  height: 50%;
}
</style>
